<template>
	<div class="middle">
		<form action="" class="biaodan">
			<input type="text" class="inp" placeholder="输入学校、商务楼、地址" v-model="keyword">
			<input type="button" value="提交" @click="btn">
			<div class="sousuo" v-show="(show,show1)">搜索历史</div>
		</form>

		<div class="juti" v-for="item in dizhi1" :key="item.name" @click='dianji(item)'>

			<router-link :to="{path:'/b_',query:{name:item.name,j:item.longitude,w:item.latitude}}">
				<h4>{{item.name}}</h4>
				<p>{{item.address}}</p>
			</router-link>

		</div>
		<div v-for="(infor,index) in historyC" :key='index' class="sslishi juti">
			<router-link :to="{path:'/b_',query:{name:infor.name,j:infor.longitude,w:infor.latitude}}">
				<h4>{{infor.name}}</h4>
				<p>{{infor.address}}</p>
			</router-link>
		</div>
		<div @click="clearAll" class="clearjl" v-show="(show,show2)">
			清空历史记录
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				keyword: '',
				data: {},
				show: true,
				show1:true,
				show2:true,
				styleobj:{display:'none'},
				dizhi1: [],
				dizhi2: [],
				id: '',
				historyC: []

			}
		},
		created() {
			//将数据转化为对象类型
			this.historyC = JSON.parse(localStorage.getItem('inforobj'));
			this.id = this.$route.query.id;
		},
		mounted() {
			if(this.historyC.length == 0) {
				this.show2 = false;
			}else {
				this.show2 = true;
			}
		},
		beforeUpdate() {
			if(this.historyC.length == 0) {
				this.show2 = false;
			}else {
				this.show2 = true;
			}
		},
		methods: {
			dianji: function(datas) {
				// datas将点击的地点信息传递过来
				//将字符串数据转化为对象类型
				let inforobj = JSON.parse(localStorage.getItem('inforobj'));
				//将返回回来的数据存储进事先准备好的数组中
				this.historyC.unshift(datas);
				//将数组中的数据进行JSON解析转化为字符串格式，存进本地。
				window.localStorage.setItem('inforobj', JSON.stringify(this.historyC));
			},
			btn() {
				this.$axios({
					url: 'https://elm.cangdu.org/v1/pois?city_id=' + this.id + '&keyword=' + this.keyword + '&type=search',
					method: "get",
				}).then(res => {
					this.dizhi1 = res.data;
					this.show = false;
					this.show1 = false;
				});
			},
			clearAll: function() {
				this.show = false;
				this.show1 = true;
				//清空数组，再将空数组存进本地，替换原来的数据
				this.historyC = [];
				window.localStorage.setItem('inforobj', JSON.stringify(this.historyC));
				
			}
		}
	}
</script>

<style scoped>
	.middle {
		height: 86px;
		background: #FFFFFF;
		margin-top: 9px;
		border: 1px rgb(228, 228, 228) solid;
	}

	.biaodan {
		margin-bottom: 10px;
	}

	.inp {
		width: 290px;
		box-sizing: border-box;
		height: 28px;
		margin: 10px 0 10px 16px;
		border: none;
		border: 1px rgb(228, 228, 228) solid;
		border-radius: 2px;
		padding-left: 12px;
		outline: none;
		font-size: 14px;
	}

	[type=button] {
		width: 290px;
		height: 28px;
		border: none;
		background: #3190E8;
		margin-left: 16px;
		color: #FFFFFF;
		font-size: 13px;
		border-radius: 2px;
		outline: none;
	}

	.sousuo {
		margin-top: 12px;
		font-size: 12px;
		border-bottom: 1px rgb(228, 228, 228) solid;
		padding-left: 10px;

	}

	.juti {
		height: 65px;
		box-sizing: border-box;
		background: white;
		padding-top: 13px;
		padding-left: 16px;
		border: 1px rgb(228, 228, 228) solid;
		border-left: 0;
		border-right: 0;
	}

	h4 {
		font-size: 13px;
		width: 90%;
		color: #333;
		margin-bottom: 7px;
	}

	p {
		font-size: 12px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: #999999;
	}
	.sslishi {
		margin-top: -10px;
	}
	.clearjl {
		height: 40px;
		color: #666666;
		background: white;
		font-size: 14px;
		text-align: center;
		line-height: 40px;
	}
</style>
